<template>
  <view class="question-bar" >
    <view class="question-content">
      <view class="icon-wrapper" @click="showSelectPanel">
        <u-icon name="plus-circle" size="40" color="#07C160"></u-icon>
      </view>
      <view class="text-wrapper" @click="handleJump">
        <text class="question-text">{{ selectedMode === 'web' ? '联网搜索' : '基于知识库提问' }}</text>
        <u-icon name="arrow-right" size="24" color="#BFBFBF"></u-icon>
      </view>
    </view>
    
    <!-- 下拉选择面板 -->
    <u-popup v-model="showSelect" mode="bottom" border-radius="16">
      <view class="select-panel">
        <view class="select-title">选择提问方式</view>
        <view class="select-item" @click="handleSelect('web')">
          <text>联网搜索</text>
          <u-icon v-if="selectedMode === 'web'" name="checkmark-circle" color="#07C160" size="24"></u-icon>
        </view>
        <view class="select-item" @click="handleSelect('kb')">
          <text>基于知识库提问</text>
          <u-icon v-if="selectedMode === 'kb'" name="checkmark-circle" color="#07C160" size="24"></u-icon>
        </view>
        <view class="select-cancel" @click="showSelect = false">
          <text>取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'QuestionBar',
  data() {
    return {
      showSelect: false,
      selectedMode: 'kb', // 默认选择知识库提问
      hasSelected: false // 是否已经选择过模式
    }
  },
  methods: {
    showSelectPanel() {
      this.showSelect = true
    },
    handleJump() {
      this.$emit('click', { mode: this.selectedMode })
    },
    handleSelect(mode) {
      this.selectedMode = mode
      this.showSelect = false
    }
  }
}
</script>

<style lang="scss" scoped>
.question-bar {
  position: fixed;
  bottom: 20rpx;
  left: 20rpx;
  right: 20rpx;
  height: 100rpx;
  background-color: #ffffff;
  border-radius: 40rpx;
  
  .question-content {
    height: 100%;
    display: flex;
    align-items: center;
    
    .icon-wrapper {
      padding-left: 30rpx;
    }
    
    .text-wrapper {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 16rpx;
      padding-right: 30rpx;
      
      .question-text {
        font-size: 28rpx;
        color: #8F8F8F;
      }
    }
  }
}

.select-panel {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .select-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }
  
  .select-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f5f5f5;
    
    text {
      font-size: 28rpx;
      color: #333333;
    }
  }
  
  .select-cancel {
    margin-top: 30rpx;
    text-align: center;
    padding: 30rpx 0;
    
    text {
      font-size: 28rpx;
      color: #999999;
    }
  }
}
</style> 